import services from '@/services/demo';
import {
  ActionType,
  FooterToolbar,
  ProDescriptions,
  ProDescriptionsItemProps,
  ProTable,
} from '@ant-design/pro-components';
import { Button, Divider, Drawer, message,Form,Modal } from 'antd';
import React, { useRef, useState,useEffect } from 'react';
import CreateForm from '@/components/CreateForm';

const { partTimeList,detail,del,update } =
  services.infoController;

const TableList: React.FC<unknown> = () => {
  const [list, setList] = useState<any[]>([]);// 列表数据
  const [actionId, setActionId] = useState<string>('');// 
  const [actionItem, setActionItem] = useState<any>({});// 
  const [pageNum, setPageNum] = useState<number>(1);// 

  const [createModalVisible, handleModalVisible] = useState<boolean>(false);
  const [openModel, setOpenModel] = useState<boolean>(false);
  const [openModelUrl, setOpenModelUrl] = useState<string>('');// 

  const [form] = Form.useForm();
  const actionRef = useRef<ActionType>();
  const columns: ProDescriptionsItemProps<API.OrderClumns>[] = [
    {
      title: '兼职人员',
      dataIndex: 'name',
    },
    {
      title: '宣传平台',
      dataIndex: 'platform',
      valueType: 'text',
    },
    {
      title: '截图',
      dataIndex: 'imgUrl',
      hideInSearch:true,
      render: (_, record) => (
        <>
          <img onClick={()=>{setOpenModel(true);setOpenModelUrl(record.imgUrl)}} style={{width:'50px',cursor:'pointer'}} src={record.imgUrl} alt="" />
        </>
      ),
    },
    {
      title: '描述',
      dataIndex: 'descText',
      hideInSearch: true,
    },
    {
      title: '记录时间',
      dataIndex: 'createTime',
      hideInSearch: true,
      hideInForm:true,
    },
  ];
  // 获取列表数据
  const getList = ()=>{
    partTimeList({pageNum,pageSize:10,...searchData}).then((res:any)=>{
      if(res.code=='200'){
        setList(res.data.list || [])
        setTotal(res.data.total)
      }else{
        message.error(res.message);
      }
    })
  }
  const [searchData, setSearchData] = useState<any>({});// 搜索参数
  useEffect(()=>{
    getList()// 获取列表数据
  },[pageNum,searchData])
  const search = async (value:any) => {
    console.log('search',value)
    setPageNum(1)
    setSearchData({...value})
  }
  const add = (data:any={})=>{
    form.resetFields();// 重置
    handleModalVisible(true)
    if(data.id){// 编辑  
      setActionId(data.id || '')
      form.setFieldsValue({...data})
      setActionItem({...data})
    }else{// 新建
      setActionId('')
    }
  }
  const [total, setTotal] = useState<number>(0);// 总数
  const pageOnChange = (page:number, pageSize:number)=>{
    setPageNum(page)
  }
  return (
    <div>
      <ProTable<API.UserInfo>
        // headerTitle="查询表格"
        actionRef={actionRef}
        onSubmit={search}
        rowKey="id"
        search={{
          defaultCollapsed:false,
          labelWidth: 120,
        }}
        pagination={{
          total,
          current:pageNum,
          pageSizeOptions:[],
          pageSize:10,
          hideOnSinglePage:true,
          onChange:pageOnChange
        }}
        dataSource={list}
        columns={columns}
      />
      <Modal
        destroyOnClose
        title={'image'}
        width={700}
        open={openModel}
        onCancel={() => setOpenModel(false)}
        footer={null}
      >
        <div style={{width:'652px',height:'500px',overflow:'auto',display:'flex',justifyContent:'center',alignItems:'center'}}>
          <img style={{width:'100%'}} src={openModelUrl} alt="" />
        </div>
      </Modal>
    </div>
  );
};

export default TableList;
